import { Text, StyleSheet, View, Image, SafeAreaView, ScrollView, Dimensions, Modal } from 'react-native'
import React, { Component, createRef } from 'react'
import { connect } from 'react-redux'
import { SetWalletNetworkListOpen } from "../redux/features/walletSlice"
import { IconFill, IconOutline } from "@ant-design/icons-react-native";
import { formatAddress } from "../utils/format"
import { pTx } from '../utils/dimensions'
import AddModalWallet from "./addModalWallet"

class walletNetworkList extends Component {
    constructor(props) {
        super(props)
        this.addModalWalletRefs = createRef();
    }
    componentDidMount = () => {
        // console.log(this.props.wallet.walletNetworkListOpen)
    }
    render() {
        return (
            <>
                <Modal
                    visible={this.props.wallet.walletNetworkListOpen}
                    animationType="slide"
                    transparent={true}>
                    <View style={styles.modalBlock}>
                        <View style={styles.centeredView}>
                            <View style={[styles.headTtle, styles.flexDirectionRow]}>
                                <Image style={[styles.iconImage]} source={require('../assets/image/icon3.png')}></Image>
                                <Text style={styles.title}>钱包列表</Text>
                                <IconOutline style={[styles.icon]} name="close" onPress={() => this.props.SetWalletNetworkListOpen(false)} />
                            </View>
                            <SafeAreaView style={styles.list}>
                                <ScrollView style={styles.leftRow}>
                                    <View style={[styles.iconCell, { backgroundColor: "#fff" }]}>
                                        <Image style={[styles.iconLogo]} source={require('../assets/logo.png')}></Image>
                                    </View>
                                    <View style={[styles.iconCell]}>
                                        <Image style={[styles.iconLogo]} source={require('../assets/logo.png')}></Image>
                                    </View>
                                </ScrollView>
                                <View style={styles.rightRow}>
                                    <View style={[styles.rightRowTitle, styles.flexDirectionRow]}>
                                        <Text style={styles.RowTitle}>币安知能链</Text>
                                        <IconOutline style={[styles.icon]} name="plus-circle" onPress={() => this.addModalWalletRefs.setOpen(true)} />
                                    </View>
                                    <ScrollView>
                                        <View style={[styles.cell]}>
                                            <View style={styles.cel}>
                                                <Text style={styles.name}>BSC-7</Text>
                                                <View style={[styles.flexDirectionRow, { marginTop: pTx(5) }]}>
                                                    <Text style={styles.address}>{formatAddress("dassdsadsad")}</Text>
                                                    <IconOutline style={[styles.minicon]} name="copy" />
                                                </View>
                                            </View>
                                            <IconOutline name="check" style={[styles.icon, { color: "rgba(237, 184, 26, 1)", marginTop: pTx(15) }]} />
                                            <Text style={styles.vlaue}>0.01463 BNB</Text>
                                        </View>
                                    </ScrollView>
                                </View>
                            </SafeAreaView>
                            <AddModalWallet ref={el => this.addModalWalletRefs = el} />
                        </View>
                    </View>
                </Modal>
            </>
        )
    }
}


const mapState = state => {
    return {
        wallet: state.wallet,
        network: state.network
    }
};


export default connect(mapState, { SetWalletNetworkListOpen })(walletNetworkList)

const styles = StyleSheet.create({
    modalBlock: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    centeredView: {
        position: "absolute",
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: "rgba(237, 237, 237, 1)",
        borderTopRightRadius: pTx(15),
        borderTopLeftRadius: pTx(15),
    },
    headTtle: {
        paddingHorizontal: pTx(15),
        paddingVertical: pTx(15),
    },
    flexDirectionRow: {
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    icon: {
        fontSize: pTx(16),
    },
    iconImage: {
        width: pTx(18),
        height: pTx(18),
    },
    title: {
        fontSize: pTx(18),
        color: "#0A0C14"
    },
    list: {
        backgroundColor: "#fff",
        flex: 1,
        height: Dimensions.get('screen').height - pTx(200),
        flexDirection: "row",
    },
    leftRow: {
        flexBasis: pTx(70),
        flexShrink: 0,
        flexGrow: 0,
        backgroundColor: "rgba(237, 237, 237, 1)",
    },
    iconCell: {
        height: pTx(70),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
    },
    iconLogo: {
        width: pTx(32),
        height: pTx(32),
        borderRadius: pTx(32),
    },
    rightRow: {
        flexBasis: "auto",
        flexShrink: 1,
        flexGrow: 1,
        paddingHorizontal: pTx(15),
    },
    rightRowTitle: {
        height: pTx(50),
    },
    RowTitle: {
        fontSize: pTx(12),
        color: "#0A0C14",
    },
    cell: {
        marginBottom: pTx(8),
        position: "relative",
        flexDirection: 'row',
        justifyContent: "space-between",
        height: pTx(100),
        backgroundColor: "#000",
        borderRadius: pTx(6),
        paddingHorizontal: pTx(12),
        paddingVertical: pTx(12),
    },
    name: {
        fontSize: pTx(15),
        color: "rgba(237, 184, 26, 1)",
        fontWeight: "500",
    },
    address: {
        fontSize: pTx(12),
        color: "rgba(237, 184, 26, 0.5)",
    },
    minicon: {
        marginLeft: pTx(12),
        fontSize: pTx(8),
        color: "rgba(237, 184, 26, 0.5)",
    },
    vlaue: {
        position: "absolute",
        right: 0,
        bottom: 0,
        paddingBottom: pTx(12),
        paddingRight: pTx(12),
        fontSize: pTx(14),
        fontWeight: "400",
        color: "rgba(237, 184, 26, 1)",
    }
})